<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';
import Platform from '@/common/components/platform-avatar/index.vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <a class="page-home-recommend-repository block" :href="props.data.jump" target="_blank">
    <div class="group border-b-1 border-hex-e3e3e3 border-solid p-16 hover:(bg-hex-fafafa)">
      <div class="flex-y-center">
        <span class="text-12 text-hex-292929 font-400 leading-20" v-if="props.data.isSelected">
          <span>{{ $t('home.common.prime') }}</span>
          <span class="mx-4 text-hex-adadad">|</span>
        </span>
        <span class="text-12 text-hex-adadad font-400 leading-20">{{ $t('home.content.title3') }}</span>
      </div>

      <h3 class="line-clamp-1 mt-4 w-752px flex cursor-pointer items-center break-anywhere text-16 color-hex-292929 font-500 leading-24 group-hover:(underline)">
        <span class="truncate" :title="`${props.data.belongName ? `${props.data.belongName}/` : ''}${props.data.name}`">
          {{ props.data.belongName ? `${props.data.belongName}/` : '' }}{{ props.data.name }}
        </span>
        <Platform class="ml-4 shrink-0" :platform="props.data.platform" icon-class="size-16" tooltip />
      </h3>

      <p class="line-clamp-1 mt-4 break-anywhere text-14px color-hex-575757 font-400 leading-22">
        {{ props.data.description ? props.data.description : $t('home.home.recommend.repository.empty') }}
      </p>

      <div class="mt-8 flex gap-24">
        <div class="flex-y-center gap-4 text-12 color-hex-575757 font-400">
          <div class="i-icons:star size-16"></div>
          <div class="h-16">{{ formatNumber(props.data.starCount) }}</div>
        </div>
        <div class="flex-y-center gap-4 text-12 color-hex-575757 font-400">
          <div class="i-icons:fork size-16"></div>
          <div class="h-16">{{ formatNumber(props.data.forkCount) }}</div>
        </div>
        <div v-if="props.data.license" class="flex-y-center gap-4 text-12 color-hex-575757 font-400">
          <div class="i-icons:license size-16"></div>
          <div class="h-16">{{ props.data.license }}</div>
        </div>
      </div>
    </div>
  </a>
</template>

<style lang="scss" scoped>
</style>
